<template>
	<view>
		<!-- <button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>  -->
		<!-- <button >播放录音</button> -->
		<view v-if="courseInfo.videurl">
			<video id="myVideo" :src="courseInfo.videurl" @error="videoErrorCallback"
				@timeupdate="videoTimeUpdateEvent"></video>
		</view>
		<view v-else>
			<u-swiper @click="lookImg" border-radius="0" mode='number' :autoplay='false' indicator-pos='bottomRight'
				img-mode='scaleToFill' :list="bannerList" height="370"></u-swiper>
			<view v-if="courseInfo.audio">
				<free-audio :isvip="!isVip&&!course.purchasec" @stydes='binfaUpdata' startPic='/static/play.png'
					endPic='/static/stop.png' audioId="audioId" :url='courseInfo.audio'>
				</free-audio>
			</view>
		</view>
		<!-- 课程名称 -->
		<view class="mdx">
			<view class="kc_name">{{courseInfo.name||''}}</view>
			<view class="u-flex">
				<view class="study_icon">学习币：{{courseInfo.currency||0}}</view>
				<view class="u-flex-1 studyNum">{{courseInfo.degreeofheat||0}}人学过该课程</view>
				<view class="nowBuy" v-if="!isVip&&!course.purchasec" @click="nowBuybtn">立即购买</view>
			</view>
		</view>
		<!-- <view class="line" style="padding:0 30rpx;padding-bottom: 25rpx;">
			<view class="hui99" style="padding-top: 25rpx;">{{degreeofheat }}人学过该课程</view>
		</view> -->
		<view class=" line dis align-items hui66 padding30rpx">
			<view class="u-flex-1 u-flex u-row-between u-m-r-50" style="color: #4CACD4;">
				<view class="u-flex" @click="collectTap()">
					<view class="u-m-t-5">
						<u-icon size="40"
							:name="course.collectionYES==true?'/static/images/scSelect.png':'/static/images/shouchang.png'">
						</u-icon>
					</view>
					<view class="u-m-l-10">收藏</view>
				</view>
				<view class="u-flex" @click="tan=true">
					<view class="u-m-t-5">
						<u-icon size="40" name="/static/images/share.png"></u-icon>
					</view>
					<view class="u-m-l-10">转发</view>
				</view>
				<view class="u-flex u-relative">
					<view class="u-m-t-5">
						<u-icon size="40" name="/static/images/kefu.png"></u-icon>
					</view>
					<view class="u-m-l-10">客服</view>
					<button open-type="contact" class="hui99 ku"> 转发至好友</button>
				</view>
			</view>
			<view class="align-items dis">
				<view @tap="introduce(course)">查看课程介绍</view>
				<u-icon name="arrow-right" size="28"></u-icon>
			</view>
		</view>
		<!-- 学习打卡按钮 -->
		<view style="margin-top: 40rpx;width: 60%;margin: auto">
			<view class="dakabtn_n" v-if="!isVip&&!course.purchasec">学习打卡</view>
			<view class="dakabtn_n" v-else-if="course.durations=='0%'">学习打卡</view>
			<view class="dakabtn" v-else @click="study">学习打卡</view>

		</view>
		<view class="nuto"></view>
		<!-- 介绍 -->
		<view class="padding30rpx ">
			<view class="fontSize32rpx" style="font-weight: bold;">讲师介绍</view>
			<view class="flexc align-items">
				<u-avatar size="100" :src="courseInfo.lecturerHead"></u-avatar>
				<label style="margin-left: 15rpx;">{{courseInfo.lecturerName||''}}</label>
			</view>
			<view class="hui66 margin-top25rpx">
				{{courseInfo.lecturerjshao||''}}
			</view>
		</view>
		<view class="nuto"></view>
		<view class="padding30rpx " v-if="remoList.length">
			<view class="fontSize32rpx dis">
				<view style="font-weight: bold;">课程推荐</view>
				<view class="hui66" @tap="more">
					查看更多
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			<view class="flexc dis ">
				<view class="coures-list margin-top25rpx" v-for="(item,index) in remoList" :key="index">
					<image :src="item.imgNameC"></image>
					<view class="clamp1">{{item.name}}</view>
					<view v-if="nonmember == 0" class="margin-top25rpx">
						<view class="term-left">学习币：{{item.currency || 0}}</view>
						<button class="btn margin-top25rpx" @tap="promptly(item)">立即购买</button>
					</view>
				</view>
			</view>
		</view>
		<view class="nuto"></view>
		<view class="padding30rpx">
			<view class="fontSize32rpx">
				<view style="font-weight: bold;">学习心得</view>
			</view>
			<view class="margin-top25rpx" style="width: 100%;">
				<textarea v-model="ping" placeholder="请输入" class="padding30rpx"></textarea>
			</view>
			<view class="margin-top25rpx dis align-items">
				<view>课程评分</view>
				<u-rate active-color="#FFBD12" :count="count" v-model="value"></u-rate>
			</view>
			<!-- <view style="margin-top: 40rpx;">
				<button class="btn" @tap="subtn" v-if="course.durations=='100%'">提交</button>
				<button class="noneBtn" @tap="subtn" v-else>提交</button>
			</view> -->
			<view style="margin-top: 40rpx;width: 80%;margin: auto">
				<view class="dakabtn_n" v-if="!isVip&&!course.purchasec" @click="subtn">提交</view>
				<view class="dakabtn_n" v-else-if="course.durations=='0%'">提交</view>
				<view class="dakabtn" v-else @click="subtn">提交</view>

			</view>
		</view>
		<view class="padding30rpx">
			<view class="dakabtn_n" v-if="!isVip&&!course.purchasec" @click="testCourse">随堂测试</view>
			<view class="dakabtn_n" v-else-if="course.durations=='0%'" @click="testCourse">随堂测试</view>
			<view class="dakabtn_n" v-else @click="testCourse">随堂测试</view>
		</view>
		<u-popup mode="bottom" v-model="tan">
			<view class="padding30rpx">
				<view class="u-flex u-row-center">
					<view @click="fen" class="shar_box u-text-center">
						<image src="../../../static/weixin.png" style="width: 110rpx; height: 110rpx;"></image>
						<view class="hui99"></view>
						<view class="u-text-center">
							转发至好友
						</view>
						<button open-type="share" class="hui99 ku"> 转发至好友</button>
					</view>
					<view @click="peng" class="shar_box u-text-center u-m-l-80">
						<image src="../../../static/peng.png" style="width: 110rpx; height: 110rpx;"></image>
						<view class="u-text-center">
							转发至朋友圈
						</view>
						<!-- <view class="hui99" style="margin-top: 15rpx;color: #333333;">转发至朋友圈</view> -->
					</view>
				</view>
				<view @click="tan = false" class="quxiao">取消</view>
			</view>
		</u-popup>
		<u-popup v-model="tao" mode="center" width="500">
			<view style="text-align: center;" class="hui66 padding30rpx">
				<image class="hui_img" src="/static/map/hui.png"></image>
				<view>开通岗位会员可以拥有</view>
				专属的岗位学习地图，享受岗位内
				全部课程、学习、考评、竞赛权益
			</view>
			<view class="dis choice-line">
				<view class="choice_zan" @click="cancel">暂不开通</view>
				<view class="hui66lv choice_open" @click="transaction">开通会员</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();

	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '欢迎使用零商e学',
				path: '/pages/term/term?type=share&id=' + this.id
			}
		},
		components: {
			freeAudio
		},
		data() {
			return {
				path: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				showy: false,
				tan: false,
				recorderManager: {},
				innerAudioContext: {},
				text: 'uni-app',



				showLoading: true,
				//是否收藏
				show: true,

				//用户课程详情
				course: {},
				courseInfo: [], //课程信息
				bannerList: [], //轮播
				videoLong: 0, //视频长度
				nowLong: 0, //传唱度
				loadingNum: 0,
				isVip: false,

				count: 5,
				/*
				评分
				*/
				value: 0,
				//学习心得
				ping: '',
				//非会员等于0，会员1
				nonmember: 0,
				id: '', //课程id
				pid: '', //岗位id
				hui: '',
				tao: false,
				punchtheclock: false,

				music: null,
				musicType: 1,

				//
				videoContext: null, //视频对象
				remoList: [], //推荐课程
				upNum: 0
			}
		},
		onUnload() {
			uni.$emit('stop')
			this.jinduUpdata();
		},
		onHide() {
			uni.$emit('stop')
			this.jinduUpdata();
		},
		onShow() {
			// // return;
			// this.hui = uni.getStorageSync('hui')
			// this.selectCurriculumDetails(this.id)
			// uni.showShareMenu({
			// 	withShareTicket: true,
			// 	menus: ["shareAppMessage", "shareTimeline"]
			// })
		},
		onLoad(option) {
			innerAudioContext.autoplay = true;
			this.id = option.id || ''
			// this.pid = option.pid || ""
			if (!this.id) {
				this.$refs.uToast.show({
					title: '参数错误',
				})
				return;
			}
			//查询课程详情
			this.selectCurriculumDetails();

		},

		created() {
			// 查询某个岗位热门6条数据
			// this.selectCourseList()
			this.videoContext = uni.createVideoContext('myVideo');
		},
		methods: {
			lookImg(e) {
				uni.previewImage({
					current: e,
					urls: this.bannerList
				})
			},
			getUser() {
				this.$http.get('app/UserController/selectUserYESMember', {
					pid: this.pid
				}).then(res => {
					if (res.code == 200) {
						this.isVip = res.data;
					} else {

					}
				})
			},
			//立即狗毛
			nowBuybtn() {
				if (!this.id || !this.pid) {
					this.$mHelper.toast('课程信息错误，请稍后重试')
					return;
				}
				this.$mHelper.to('/pagesB/buylist/buylist?id=' + this.id + '&pid=' + this.pid)
			},
			//开通会员
			transaction() {
				uni.navigateTo({
					url: '../../study/choice/transaction/transaction?pid=' + this.pid
				})
			},
			//暂不开通
			cancel() {
				this.tao = false
			},
			// 查询某个岗位热门6条数据

			//收藏和取消收藏
			collectTap() {
				let url = ''
				if (this.course.collectionYES) {
					url = 'app/UserController/deleteUserCollection'
				} else {
					url = 'app/UserController/addCollection'
				}
				this.$http.get(url, {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.course.collectionYES = !this.course.collectionYES;
						console.log(this.course.collectionYES);
					} else {
						this.$refs.uToast.show({
							title: res.message,
						})
					}
				})
			},

			// /发送给朋友
			fen() {
				// // 此处的distSource为分享者的部分信息，需要传递给其他人
				// let distSource = uni.getStorageSync('distSource');
				// if (distSource) {
				// 	return {
				// 		title: '欢迎使用零商e学',
				// 		type: 0,
				// 		path: '/pages/term/course/course' + distSource,
				// 		summary: "",
				// 		imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
				// 	}
				// }
			},

			//分享到朋友圈
			peng() {
				//功能暂未开放
				this.$mHelper.toast('功能暂未开放')
				return;
				let distSource = this.id;
				if (distSource) {
					return {
						title: '欢迎使用零商e学',
						type: 0,
						query: 'id=' + distSource,
						summary: "",
						imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
					}
				}

			},

			startRecord() {
				console.log('开始录音');
				recorderManager.start();
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
				this.showy = false
			},

			// 查询某个岗位热门6条数据
			selectTodayCourse() {
				this.$http.get('app/CurriculumContrller/selectCourseList', {
					gid: this.pid,
				}).then(res => {
					if (res.code == 200) {
						this.remoList = res.data
					}
					uni.hideLoading();
				})
			},
			//查询课程详情
			selectCurriculumDetails(e) {
				this.$http.get('/app/CurriculumContrller/selectCurriculumDetails', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.course = res.data
						this.courseInfo = res.data.tcurriculum
						if (res.data.tcurriculum.imgelist.length) {
							this.bannerList = JSON.parse(res.data.tcurriculum.imgelist)
						}
						this.pid = res.data.tcurriculum.pid
						if (!this.pid || !this.id) {
							this.$refs.uToast.show({
								title: '参数错误',
							})
							return;
						}
						this.getUser();
						this.selectTodayCourse();
					} else {
						this.$refs.uToast.show({
							title: res.message || '参数错误',
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 2500);
					}
				});
			},
			videoTimeUpdateEvent(e) {
				let currentTime = Number(e.detail.currentTime);
				this.videoLong = Number(e.detail.duration);
				this.nowLong = Number(e.detail.currentTime)
				if ((this.nowLong / this.videoLong) > 0.9) {
					this.binfaUpdataVideo();
				};
				// 试看结束 this.class_info.freed_time为试看时间
				if (!this.isVip && !this.course.purchasec) {
					if (currentTime >= 180) {
						// 试看结束,在这做一些想做的操作,例如停止视频播放
						this.videoContext.exitFullScreen();
						this.videoContext.pause();
						this.videoContext.seek(0);
						// uni.showModal({
						// 	content: '试看结束！请开通VIP'
						// })
						uni.showToast({
							title: '试看结束',
							icon: 'none'
						})
						this.tao = true;
					}
				}


			},
			//图片加载失败时触发
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
				if (this.courseInfo.videurl) {
					uni.showToast({
						title: '视频资源路径错误，请稍后重试！',
						icon: 'none'
					})
				}
			},
			//学习打卡
			study() {
				this.$http.get('app/CurriculumContrller/addUserP', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '打卡成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
				return
				if (this.hui == false) {
					this.tao = true
				} else {
					this.punchtheclock = true
					uni.request({
						method: 'GET',
						url: this.$api + '/app/CurriculumContrller/addUserP',
						data: {
							id: this.id
						},
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							console.log('------', res.data)
							if (res.data.code == 200) {
								this.selectCurriculumDetails(this.id)
							}
						},
						fail(err) {
							console.log(err)
						}
					})
				}


			},
			//查看更多
			more() {
				this.$mHelper.to('/pages/term/seek/seek?pid=' + this.pid);
			},
			//学习新的提交
			subtn() {
				var that = this
				if (!this.ping) {
					this.$refs.uToast.show({
						title: '请输入学习心得',
					})
					return;
				}

				if (!this.value) {
					this.$refs.uToast.show({
						title: '请对课程进行评分',
					})
					return;
				}
				this.$http.get('/app/CurriculumContrller/addgrade', {
					id: that.id,
					deng: that.value,
					ping: that.ping
				}).then(res => {
					if (res.code == 200) {
						this.ping = ''
						this.value = 0
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						})
					} else {
						this.$refs.uToast.show({
							title: res.message,
						})
					}
				})


			},
			//随堂测试
			// test() {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '敬请期待~'
			// 	})
			// },
			testCourse(){
				this.$mHelper.to('/pages/examine/schoolTest?type=2&currId='+this.id)
			},
			//课程介绍
			introduce(i) {
				uni.setStorage({
					key: 'details',
					data: this.courseInfo.details,
					success: () => {
						this.$mHelper.to('/pages/term/course/introduce/introduce')
					}
				})

			},
			//非会员立即购买
			promptly(i) {
				uni.navigateTo({
					url: '../../../pagesB/buylist/buylist?id=' + i.id + '&pid=' + this.pid
				})

			},
			binfaUpdata() {
				this.$u.throttle(this.audoUpdata, 2000)
			},
			audoUpdata() {
				if (this.upNum) {
					return;
				}
				console.log(!this.upNum);
				this.$http.request('app/CurriculumContrller/updateCurriculmUser', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.upNum = 1
						this.course.durations = '100%'
					} else {

					}
				})

			},
			binfaUpdataVideo() {
				this.$u.throttle(this.jinduUpdata, 2000)
			},
			jinduUpdata() {
				if (this.upNum) {
					return;
				}
				let num = (this.nowLong / this.videoLong)
				console.log(num);
				console.log('视频时长：' + this.nowLong);
				console.log('视频播放时长：' + this.videoLong);
				if (num < 0.9) {
					return;
				}
				if (!this.nowLong || !this.videoLong) {
					return
				}
				this.$http.request('app/CurriculumContrller/updateCurriculmUser', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.upNum = 1
						this.course.durations = '100%'
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dakabtn {
		background: #00A29A;
		height: 92rpx;
		margin: 40rpx 0;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.dakabtn_n {
		background: #DDDDDD;
		height: 92rpx;
		margin: 40rpx 0;
		color: #999;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.mdx {
		width: 92%;
		margin-left: 4%;
	}

	.kc_name {
		font-size: 32rpx;
		font-weight: 550;
		padding: 20rpx 0;
	}

	.study_icon {
		background-color: #D9F6FF;
		border-radius: 16rpx 0px;
		color: #00A29A;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}

	.nowBuy {
		color: #00A29A;
		border: 1rpx solid #00A29A;
		padding: 5rpx 13rpx;
		border-radius: 5rpx;
	}

	.studyNum {
		font-size: 24rpx;
		color: #999999;
		margin-left: 15rpx;
	}

	.choice_open {
		width: 49%;
		text-align: center;
	}

	.choice_zan {
		border-right: 1rpx solid #dcdcdc;
		text-align: center;
		width: 49%;
		color: #666666;
	}

	.huiyuan {
		width: 35rpx;
		height: 26rpx;
		margin-left: 20rpx;
	}

	.hui_img {
		width: 200rpx;
		height: 190rpx;
	}

	.choice-line {
		border-top: 1rpx solid #dcdcdc;
		height: 80rpx;
		line-height: 80rpx;
	}

	.quxiao {
		width: 100%;
		background-color: #dddddd;
		border-radius: 10rpx;
		margin-bottom: 80rpx;
		margin-top: 40rpx;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
		font-weight: 550;
	}

	.yp {
		display: flex;
		flex-direction: column;
		padding-top: -65rpx;
	}

	.shar_box {
		position: relative;
	}

	.ku {
		position: absolute;
		background: #FFFFFF;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		color: #333333;
		width: 190rpx;
		margin-left: -40rpx;
	}

	.ku::after {
		border: none;
	}

	.kefu {
		background: #FFFFFF;
		border: none;
		color: #333333;
		font-size: 28rpx;
		margin-top: -32rpx;
		position: absolute;
		height: 50rpx;
		color: #666666;
		// left: 0;
		width: 170rpx;
	}

	.kefu::after {
		border: none;
	}

	.term-left {
		width: 200rpx;
		height: 48rpx;
		background: #D9F6FF;
		text-align: center;
		font-size: 24rpx;
		line-height: 45rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 0 10rpx;
		color: #00A29A;
	}

	.btn {
		height: 72rpx;
		color: #FFFFFF;
		background-color: #00a29a;
		font-size: 28rpx;
		width: 100%;
	}

	.noneBtn {
		height: 72rpx;
		color: #FFFFFF;
		background-color: #dddddd;
		font-size: 28rpx;
		width: 100%;
	}

	.coures-btn {
		margin-bottom: 80rpx;
		margin-top: 80rpx;
		width: 100%;
		border-radius: 10rpx;
		background-color: #DDDDDD;
		text-align: center;
		line-height: 92rpx;
		height: 92rpx;
		color: #999999;
	}

	textarea {
		background-color: #efefef;
		width: 90%;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	#myVideo {
		width: 100%;
		height: 376rpx;
	}

	.cang {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.cang1 {
		width: 33rpx;
		height: 33rpx;
		margin-right: 16rpx;
	}

	button {
		height: 92rpx;
		width: 60%;
		margin-bottom: 40rpx;
		background-color: #00a29a;
		color: #FFFFFF;

	}

	.course-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.coures-list {
		width: 47%;

		image {
			width: 100%;
			height: 240rpx;
			border-radius: 10rpx;
		}
	}
</style>
